<template>
	<view class="home" :style="'padding-top:'+CustomBar+'px'">
		<!-- header -->
		<view class="home-header" :style="style+'background-image:linear-gradient(left, '+NowGradual.start+','+ NowGradual.end+');background-image:-o-linear-gradient(left, '+NowGradual.start+','+ NowGradual.end+');background-image:-webkit-gradient(linear, left top, right top, from('+NowGradual.start+'),to('+NowGradual.end+'))'">
			<view class="left">
				<view class="now-add" @click='nav' :data-url="'/pages/selectCity?currentCity='+cityName">
					<view class="">{{cityName}}</view>
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/arrowDown.png"
					 lazy-load />
				</view>
			</view>
			<view class="content">
				<view class="tui-rolling-search" @click='nav' :data-url="'/pages/search'">
					<icon type="search" :size='13' name="search" color='#999'></icon>
					<swiper vertical autoplay circular interval="8000" class="tui-swiper">
						<swiper-item v-for="(item,index) in hotSearch" :key="index" class="tui-swiper-item">
							<view class="tui-hot-item">{{item}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="right" @click="scanCode">
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/saoma.png" class="saoma" />
			</view>
			<!-- #endif -->
		</view>
		<!-- header结束 -->
		<!-- banner -->
		<view class="tui-header-banner">
			<view class="tui-banner-bg" :style="'background-image:linear-gradient(left, '+NowGradual.start+','+ NowGradual.end+');background-image:-o-linear-gradient(left, '+NowGradual.start+','+ NowGradual.end+');background-image:-webkit-gradient(linear, left top, right top, from('+NowGradual.start+'),to('+NowGradual.end+'))'">
				<view class="tui-banner-box">
					<swiper :indicator-dots="false" :autoplay="autoplay" :interval="5000" :duration="150" @change="swiperChange" class="tui-banner-swiper"
					 :circular="true">
						<swiper-item v-for="(item,index) in banner" :key="index">
							<image :src="item.url" class="tui-slide-image" @click="nav" :data-url="item.to_tour" />
						</swiper-item>
					</swiper>
					<view class="rollingBar">
						<view style="flex:1"></view>
						<block v-for="(item,index) in banner" :key="index">
							<view class="tab-bar" :class="currentAdIndex==index?'active':''"></view>
						</block>
						<view style="flex:1"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- banner结束 -->
		<!-- TAB按钮 -->
		<view class="function-container" id="navBar">
			<view class="function-m">
				<view class="function-item" v-for="(item,index) in navBarList" :key="index" @click="navBarClick(item.id)">
					<image :src="item.url" />
					<view class="text">{{item.industry_name}}</view>
				</view>
			</view>
		</view>
		<image class="guang-gao" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/distribution-banner.png?x-oss-process=image/resize,m_fill,h_200,w_700" @click="nav" data-url="/pages/distributionCentre" mode=""></image>
		<!-- tips(暂定去掉) -->
		<!-- @click="nav" :data-url="item.url?'/pages/tipsDetail?src='+item.url:''" -->
		<!-- <view class="mark-swipe" v-if="tips.length>0">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/tips-new.png" class="tips-img"></image>
			<swiper class="swipe" vertical="true" autoplay="true" circular="true" interval="4000">
				<swiper-item v-for="(item,index) in tips" :key="index">
					<view class="swipe-item text-cut">
						{{item.title}}
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- 热门商家模块 -->
		<view class="title-header" v-if="newActivityList.length>0">
			<view class="action">
				<!-- <text class="cuIcon-titles text-colorP"></text> -->
				<text class="text-xl text-bold text-black">臻选热门</text>
			</view>
			<view class="new-more" data-url="/pages/shopList/list?isPage=true" @click='nav'>
				查看更多
			</view>
		</view>
		<view class="hot-shops" v-if="newActivityList.length>0">
			<swiper @change="hotSwiperChange" :style="[{height: hotHeight}]">
				<swiper-item v-for="(shopItem,zIndex) in newActivityList" :key="zIndex">
					<view class="tui-extend-item" v-for="(item,index) in shopItem" :key="index" :data-id="item.id" :data-industryId="item.industry_id==6"
					 @click="navUrl">
						<image class="image" :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_240,w_340'" lazy-load mode=""></image>
						<view class="item-content">
							<view class="tui-title text-cut">
								{{item.name}}
							</view>
							<view class="tui-sub-title" v-if="item.distance">
								{{item.distance}}
							</view>
							<view class="tui-sub-title" v-if="!item.distance">
								入驻
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="rollingBar hotBar">
				<view style="flex:1"></view>
				<block v-for="(item,index) in newActivityList" :key="index">
					<view class="tab-bar" :class="hotIndex==index?'active':''"></view>
				</block>
				<view style="flex:1"></view>
			</view>
		</view>
		<!-- 商圈联盟 -->
		<view class="title-header" v-if="chainList.length>0">
			<view class="action">
				<text class="text-xl text-bold text-black">商圈联盟</text>
			</view>
			<view class="new-more" data-url="/pages/allianceList" @click='nav'>
				查看更多
			</view>
		</view>
		<view class="banner-content" v-if="chainList.length>0">
			<scroll-view scroll-x scroll-with-animation="true" bindscroll="lianscroll">
				<view class="swiper-container">
					<view class='swiper-item' v-for="(item,index) in chainList" :key="index">
						<view class="coon" v-if="item.has" :data-url="'/pages/affiliateList?chainId='+item.id" @click="nav" :style="item.style">
							<image :src="item.image+'?x-oss-process=image/resize,m_fill,h_200,w_200'" lazy-load />
							<view class="name text-cut">
								{{item.name}}
							</view>
							<view class="slogin">
								{{item.summary}}
							</view>
							<view class="number">
								共{{item.number}}家
							</view>
						</view>
						<view class="coon" v-if="!item.has" data-url="/pages/shopsStore" @click="nav">
							<image class="zhanwei" lazy-load src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Leave-a-seat-vacant-2.png"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 介绍 -->
		<view class="show-grade-ima" @click="nav" data-url="/pages/paramsVideo">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/ad1.png" lazy-load mode=""></image>
		</view>
		<!-- 点赞赢免单 -->
		<view class="title-header">
			<view class="action">
				<text class="text-xl text-bold text-black">点赞赢免单</text>
			</view>
			<view class="new-more">
				共<text style="color: #f34930;">{{drawUserNums}}</text>单
			</view>
		</view>
		<view class="mf-swiper">
			<swiper :autoplay="true" circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in drawUser" :key="index">
					<view class="draw-item" v-for="(jtem,jindex) in item" :key="jindex">
						<image :src="jtem.headimg+'?x-oss-process=image/resize,m_fill,h_48,w_48'"></image>
						<view class="">
							<text class="text-cut">“{{jtem.user_name}}”在点赞免单中瓜分</text>
							<text class="">{{jtem.money}}元</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 最新尝鲜 -->
		<view class="title-header" v-if="list_data.length>0">
			<view class="action">
				<text class="text-xl text-bold text-black">上新尝鲜</text>
			</view>
			<view class="new-more" @click='nav' data-url="/pages/shopList/list?rencently=true">
				查看更多
			</view>
		</view>
		<view class="new-shops">
			<view class="news-item" v-for="(item,index) in list_data" :key="index" :data-id="item.id" :data-industryId="item.industry_id==6"
			 @click="navUrl">
				<view class="has-pro" v-if="item.product_data.length>0">
					<view class="">
						<text>NEW</text>
						<text class="text-cut">{{item.name}}</text>
						<text>{{item.distance}}</text>
					</view>
					<view class="tags" v-if="item.tags.length>0">
						<text v-for="(tag,i) in item.tags" :key="i">{{tag}}</text>
					</view>
					<view class="add">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-address.png" mode=""></image>
						<text class="text-cut">{{item.address}}</text>
					</view>
					<view class="product">
						<view class="" v-for="(pro,p) in item.product_data" :key="p">
							<image :src="pro.image+'?x-oss-process=image/resize,m_fill,h_215,w_215'" mode=""></image>
							<text class="text-cut">{{pro.product_name}}</text>
						</view>
					</view>
				</view>
				<view class="no-pro" v-if="item.product_data.length==0">
					<view class="">
						<view class="">
							<view class="">
								<text>NEW</text>
								<text class="text-cut">{{item.name}}</text>
								<text>{{item.distance}}</text>
							</view>
							<view class="tags" v-for="(tag,i) in tags" :key="i">
								<text>{{tag}}</text>
							</view>
						</view>
						<view>
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-address.png" mode=""></image>
							<text class="text-cut">{{item.address}}</text>
						</view>
					</view>
					<image :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_214,w_160'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 推荐商户 -->
		<view class="recommend-cont">
			<view class="title-header">
				<view class="action">
					<text class="text-xl text-bold text-black">推荐商家</text>
				</view>
				<view class="new-more"></view>
			</view>
			<view class="recommend-list">
				<view class="recommend-item" v-for="(item,index) in recommendList" :key="index" :data-id="item.id" :data-industryId="item.industry_id==6"
				 @click="navUrl">
					<image :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_218,w_218'" mode=""></image>
					<view class="">
						<view class="text-cut">
							<text>{{item.name}}</text>
							<text>{{item.distance}}</text>
						</view>
						<view>
							<text v-if="item.consume_number">月售{{item.consume_number}}</text>
						</view>
						<view class="tags">
							<text v-for="(tag,i) in item.tags" :key="i" v-if="item.tags.length>0">{{tag}}</text>
						</view>
						<view>
							<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/s-address.png" mode=""></image>
							<text class="text-cut">{{item.address}}</text>
						</view>
						<view class="" v-if="item.u_data.length>0">
							<view class="">
								<image :src="img+'?x-oss-process=image/resize,m_fill,h_48,w_48'" mode="" v-for="(img,k) in item.u_data" :key="k"></image>
							</view>
							<view class="">
								{{item.visit_number}}人已逛店
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 版本更新 -->
		<view class="bg-black-layer" :style="[{height: scrollH+'px'}]" v-if="versionShow">
			<view class="version" :animation="animationVersion">
				<view class="">发现新版本</view>
				<view class="">
					v{{updateInfo.version}}
				</view>
				<view class="list">
					<view class="" v-for="(item,index) in updateInfo.notes" :key="index">
						<text></text>
						<text>{{item}}</text>
					</view>
				</view>
				<view class="" @click="goUpdate">
					立即升级
				</view>
				<view class="" @click="hideVersion">
					稍后更新
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqMap.js');
	import uniTag from "../component/uni-tag.vue";
	import shopItem from "../component/shopItem.vue";
	const SystemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			uniTag,
			shopItem
		},
		data() {
			return {
				colorList: ['success', 'primary', 'warning', 'error'],
				hotSearch: [
					"美食购物",
					"自然风光",
					"娱乐游玩"
				],
				NowGradual: {
					start: '#f99522',
					end: '#ff924a'
				},
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				banner: [],
				navBarList: [],
				orders: [],
				ordersNum: '',
				tips: [],
				currentAdIndex: 0,
				cityName: uni.getStorageInfoSync('coordinate').cityName ? uni.getStorageInfoSync('coordinate').cityName : '西安市',
				chainList: [],
				lianLayer: false,
				list_data: [],
				// 标签栏距顶部位置
				navScrollHeight: 0,
				// 是否切换顶部slide
				isChange: true,
				scrollH: '',
				versionShow: false,
				animationVersion: {},
				updateInfo: {},
				newActivityList: [],
				hotIndex: 0,
				autoplay: true,
				hotHeight: 0,
				drawUser: [],
				// 推荐商品
				recommendList: [],
				recommendPage: 1,
				recommendLastPage: '',
				drawUserNums: 0
			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var NowGradual = this.NowGradual;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		onHide() {
			this.isChange = false
		},
		onPageScroll(e) {
			if (e.scrollTop - this.navScrollHeight > 80) {
				this.isChange = false
				this.autoplay = false
			} else {
				this.isChange = true
				this.autoplay = true
			}
		},
		onLoad() {
			this.getBannerNew()
			this.getTypesNew()
			this.getTipsNew()
			this.getDrawUser()
			// 需要本身经纬度获取DATA
			if (!uni.getStorageSync('coordinate')) {
				this.getAddressDataNew()
			} else {
				this.cityName = uni.getStorageSync('coordinate').cityName
				this.hasAddressData()
				// 弹出更新弹窗
				// #ifdef APP-PLUS
				if (uni.getStorageSync('updateInfo')) {
					var updateInfo = uni.getStorageSync('updateInfo')
					if (updateInfo.update) {
						this.versionShowClick()
						this.updateInfo = updateInfo
					}
				}
				// #endif
			}
			// 获取高度
			var that = this
			setTimeout(function() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#navBar').boundingClientRect(data => {
					that.navScrollHeight = data.top;
				}).exec();
			}, 50)
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			})
			// 显示切换弹窗
			if (uni.getStorageSync('changeCityFlag') && uni.getStorageSync('changeCityFlag').flag) {
				this.showChangeModal()
			}
		},
		onShow() {
			// 重新定位后重新获取数据
			if (uni.getStorageSync('isChangeCoordinate')) {
				this.cityName = uni.getStorageSync('coordinate').cityName
				this.recommendList = []
				this.recommendPage = 1
				this.recommendLastPage = ''
				this.hasAddressData()
				uni.removeStorageSync('isChangeCoordinate')
			}
			this.isChange = true
		},
		onShareAppMessage(res) {
			return {
				success: (res) => {
					console.log("转发成功", res);
				},
				fail: (res) => {
					console.log("转发失败", res);
				}
			}
		},
		onPullDownRefresh() {
			var that = this
			this.getBannerNew()
			this.getTypesNew()
			this.getTipsNew()
			this.getDrawUser()
			this.recommendList = []
			this.recommendPage = 1
			this.recommendLastPage = ''
			if (uni.getStorageSync('coordinate')) {
				this.newShopsPage = 1
				this.hasAddressData()
			}
			setTimeout(function() {
				uni.showToast({
					title: '刷新成功'
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 切换地区
			showChangeModal() {
				var that = this
				var changeCityFlag = uni.getStorageSync('changeCityFlag')
				var title = '定位到您在"' + changeCityFlag.location.cityName + '"';
				var content = '是否切换至该城市进行探索？'
				wx.showModal({
					title: title,
					content: content,
					confirmText: "切换",
					success: function(res) {
						if (res.cancel) {
							//点击取消,默认隐藏弹框
							changeCityFlag.flag = false
							uni.setStorageSync('changeCityFlag', changeCityFlag)
						} else {
							//点击确定
							var newCoordinate = uni.getStorageSync('coordinate')
							newCoordinate = changeCityFlag.location
							that.cityName = changeCityFlag.location.cityName
							uni.setStorageSync('coordinate', newCoordinate)
							that.hasAddressData()
							changeCityFlag.flag = false
							uni.setStorageSync('changeCityFlag', changeCityFlag)
						}
					},
					fail: function(res) {}, //接口调用失败的回调函数
					complete: function(res) {}
				})
			},
			// 更新版本
			goUpdate() {
				var that = this
				var updateInfo = uni.getStorageSync('updateInfo')
				if (updateInfo.updateType == 'big') {
					plus.runtime.openURL(updateInfo.pkgUrl);
					that.hideVersion()
				} else {
					uni.downloadFile({
						url: updateInfo.pkgUrl,
						success: (downloadResult) => {
							if (downloadResult.statusCode === 200) {
								that.hideVersion()
								plus.runtime.install(downloadResult.tempFilePath, {
									force: false
								}, function() {
									uni.showModal({
										title: '更新提示',
										content: '新版本已下载完成，请重启更新新版本啦~',
										showCancel: false,
										success(res) {
											if (res.confirm) {
												updateInfo.update = false
												uni.setStorageSync('updateInfo', updateInfo)
												plus.runtime.restart();
											}
										}
									})

								}, function(e) {
									console.error(e);
								});
							}
						},
						fail() {
							that.hideVersion()
							uni.showToast({
								title: '更新包拉取失败',
								icon: 'none'
							})
						}
					});
				}
			},
			// 版本更新
			versionShowClick(e) {
				var that = this
				that.versionShow = true
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.scale(1.1).step()
				setTimeout(function() {
					animation.scale(1).step()
					this.animationVersion = animation.export()
				}.bind(this), 300)
			},
			hideVersion() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.scale(1).step()
					that.animationVersion = animation.export()
					that.versionShow = false
				}.bind(this), 300)
			},
			// 扫码
			scanCode(val) {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			navBarClick(id) {
				uni.navigateTo({
					url: '/pages/shops/list?typeId=' + id
				})
			},
			// 跳转
			nav(e) {
				// 处理连锁商家的方法
				var isNav = e.currentTarget.dataset.isnav
				if (isNav) return
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url,
						fail() {
							uni.switchTab({
								url: url
							})
						}
					})
				}
			},
			goStore() {
				uni.navigateTo({
					url: '/pages/shopsStore?status=1'
				})
			},
			navUrl(e) {
				var isIndusty = e.currentTarget.dataset.industryid
				var id = e.currentTarget.dataset.id
				if (id == '-1') {
					this.goStore()
					return
				}
				if (isIndusty) {
					uni.navigateTo({
						url: '/pages/scenicDetail?busId=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + id
					})
				}
			},
			// 获取Banner图
			getBannerNew() {
				var that = this;
				this.$request({
					url: '/Slideshow/slideshowLists',
					success: res => {
						if (res.data.status == 1) {
							var bannerData = res.data.data
							that.banner = bannerData
							var itemColor = {
								start: bannerData[0].start,
								end: bannerData[0].end
							}
							that.NowGradual = itemColor
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 推荐商户
			getNearby() {
				var that = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/shop/nearbyBusinessNew',
					data: {
						page: that.recommendPage,
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.shops
							list.forEach(item => {
								if (item.u_data) {
									item.u_data = JSON.parse(item.u_data)
								}
								that.recommendList.push(item)
							})
							that.recommendPage++
							that.recommendLastPage = res.data.data.pageCount
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取活动中奖名单
			getDrawUser() {
				var that = this;
				this.$request({
					url: '/HelpActivityLog/get_log',
					data: {
						page: 1
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.data.length > 0) {
								var drawUser = that.SplitArray(5, res.data.data.data)
								drawUser = drawUser.filter(item => item.length == 5)
								that.drawUser = [...drawUser]
								that.drawUserNums = res.data.data.totalNum
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取主TAB类型
			getTypesNew() {
				var that = this;
				this.$request({
					url: '/Categorys/getLists',
					success: res => {
						if (res.data.status == 1) {
							that.navBarList = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 数组格式化
			SplitArray(N, Q) {
				var R = [],
					F;
				for (F = 0; F < Q.length;) R.push(Q.slice(F, F += N))
				return R
			},
			// 获取公告
			getTipsNew() {
				var me = this;
				this.$request({
					url: '/Tips/lists',
					success: res => {
						if (res.data.status == 1) {
							me.tips = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 更换轮播图样式
			swiperChange(e) {
				this.currentAdIndex = e.detail.current
				if (!this.isChange) return
				var itemColor = {
					start: this.banner[this.currentAdIndex].start,
					end: this.banner[this.currentAdIndex].end
				}
				this.NowGradual = itemColor
			},
			// 存在经纬度获取data
			hasAddressData() {
				var that = this
				that.getHotShopsNew()
				that.getChainShopsNew()
				that.getNewsShopsNew()
				that.getNearby()
			},
			// 地址逆查询  
			setCityNameNew() {
				var that = this
				// 实例化腾讯地图API核心类
				var qqmapsdk = new QQMapWX({
					key: '66DBZ-Q4NL4-46HUZ-X6SQW-RRTGS-HQF7I' // 必填
				});
				//1、获取当前位置坐标
				//2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
				var coordinate = uni.getStorageSync('coordinate')
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: function(addressRes) {
						var address = addressRes.result.address_component.city;
						coordinate['cityName'] = address
						uni.setStorageSync('coordinate', coordinate)
						that.cityName = address
					}
				})
			},
			// 获取地理位置
			getAddressDataNew() {
				var that = this;
				uni.getLocation({
					type: 'wgs84',
					success: map => {
						var coordinate = {
							"latitude": map.latitude,
							"longitude": map.longitude
						}
						uni.setStorageSync('coordinate', coordinate);
						that.setCityNameNew()
						that.getHotShopsNew()
						that.getChainShopsNew()
						that.getNewsShopsNew()
						that.getNearby()
					},
					fail: (e) => {
						uni.showModal({
							title: '温馨提示',
							content: '系统定位失败，请前往手动选择当前城市',
							confirmText: '立即前往',
							showCancel: false, // 不显示取消按钮
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/selectCity?currentCity=' + (that.cityName ? that.cityName : '西安市')
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
				});
			},
			// 获取热门商家
			getHotShopsNew() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/shop/getRecommendShopOrder',
					methods: 'POST',
					data: {
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							var thisData = res.data.data.data
							if (res.data.data.totalNum > 0) {
								thisData.forEach(item => {
									item.tags = item.tags.length > 2 ? item.tags.splice(0, 2) : item.tags
								})
								var newActivityList = me.SplitArray(4, thisData)
								newActivityList.forEach(item => {
									if (item.length == 1 || item.length == 3) {
										item.push({
											shop_image: 'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/remendaiti2.png',
											name: '欢迎你的加入',
											id: "-1"
										})
									}
								})
								me.newActivityList = newActivityList
								if (newActivityList[0].length > 2) {
									me.hotHeight = '650rpx'
								} else {
									me.hotHeight = '330rpx'
								}
							} else {
								me.newActivityList = []
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hotSwiperChange(e) {
				var len = this.newActivityList[e.detail.current].length
				this.hotIndex = e.detail.current
				if (len > 2) {
					this.hotHeight = '650rpx'
				} else {
					this.hotHeight = '330rpx'
				}
				console.log(this.hotHeight)
			},
			// 获取连锁商家
			getChainShopsNew() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/ChainShop/getChainShop',
					methods: 'POST',
					data: {
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							var result = res.data.data
							if (result.length == 0) {
								result = []
							} else {
								result.forEach(item => {
									item['has'] = true
								})
								if (3 - result.length > 0) {
									for (var i = 0; i < 4 - result.length; i++) {
										result.push({
											has: false
										})
									}
								}
							}
							me.chainList = result
							me.dyeing()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			dyeing() {
				var that = this
				var chainList = this.chainList
				this.$request({
					url: '/ChainShop/get_color_logo',
					success: res => {
						if (res.data.status == 1) {
							chainList.forEach(item => {
								if (item.has) {
									item.color = item.color ? item.color : '1'
									var bottomColor = res.data.data.color.filter(color => color.id == item.color)
									var style = ''
									style =
										`background-image:linear-gradient(-30deg,${bottomColor[0].start_1},${bottomColor[0].end_1});background-image:-o-linear-gradient(-30deg,${bottomColor[0].start_1},${bottomColor[0].end_1});background-image:-webkit-gradient(linear, left top, right bottom, from(${bottomColor[0].start_1}),to(${bottomColor[0].end_1}));`
									item['style'] = style
								}
							})
							that.chainList = chainList
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 最新入驻
			getNewsShopsNew() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/shop/getNewShop',
					methods: 'POST',
					data: {
						latitude: coordinate.latitude,
						longitude: coordinate.longitude,
						page_size: 3
					},
					success: res => {
						if (res.data.status == 1) {
							var data = res.data.data.data
							if (res.data != [] && data && data.length > 0) {
								data.forEach((item, index) => {
									if (index <= 2) {
										item.tags = item.tags ? item.tags.splice(0, 2) : item.tags
										item['new'] = 1
									}
								})
								me.list_data = data
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		},
		onReachBottom() {
			if (this.recommendPage > this.recommendLastPage) {
				uni.showToast({
					title: '请前往列表查看更多',
					icon: 'none'
				})
				return
			}
			this.getNearby()
		}
	}
</script>

<style scoped>
	.news-item>view {
		width: 100%;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.news-item .has-pro {
		display: flex;
		flex-direction: column;
	}

	.news-item .has-pro>view:nth-child(1) {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.news-item .has-pro>view:nth-child(1)>text:nth-child(1) {
		display: inline-block;
		width: 75rpx;
		height: 30rpx;
		background-color: #f34930;
		border-radius: 8rpx 0rpx 8rpx 0rpx;
		text-align: center;
		line-height: 30rpx;
		margin-right: 10rpx;
		color: #fff;
		font-size: 20rpx;
	}

	.news-item .has-pro>view:nth-child(1)>text:nth-child(2) {
		max-width: 450rpx;
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.news-item .has-pro>view:nth-child(1)>text:nth-child(3) {
		font-size: 24rpx;
		color: #666666;
	}

	.news-item .has-pro .tags {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.news-item .has-pro .tags text {
		padding: 0 5rpx;
		line-height: 30rpx;
		border-radius: 4rpx;
		border: solid 1rpx #efefef;
		font-size: 20rpx;
		color: #999999;
		margin-right: 15rpx;
	}

	.news-item .has-pro .tags text:nth-child(1) {
		background: rgba(248, 153, 11, .2);
		border: none !important;
		color: #f8990b !important;
	}

	.news-item .has-pro .add {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.news-item .has-pro .add image {
		width: 25rpx;
		height: 23rpx;
		margin-right: 15rpx;
	}

	.news-item .has-pro .add text {
		font-size: 24rpx;
		color: #666666;
		max-width: 550rpx;
	}

	.news-item .has-pro .product {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.news-item .has-pro .product>view {
		width: 215rpx;
		border-radius: 8rpx;
	}

	.news-item .has-pro .product>view image {
		width: 214rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}

	.news-item .has-pro .product>view text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-top: 20rpx;
		max-width: 214rpx
	}

	.news-item .no-pro {
		display: flex;
		justify-content: space-between;
	}

	.news-item .no-pro>view:nth-child(1) {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 15rpx;
		height: 160rpx;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1) {
		display: flex;
		align-items: center;
	}


	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1)>text:nth-child(1) {
		display: inline-block;
		width: 75rpx;
		height: 30rpx;
		background-color: #f34930;
		border-radius: 8rpx 0rpx 8rpx 0rpx;
		text-align: center;
		line-height: 30rpx;
		margin-right: 10rpx;
		color: #fff;
		font-size: 20rpx;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1)>text:nth-child(2) {
		max-width: 200rpx;
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(1)>view:nth-child(1)>text:nth-child(3) {
		font-size: 24rpx;
		color: #666666;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(2) image {
		width: 25rpx;
		height: 23rpx;
		margin-right: 15rpx;
	}

	.news-item .no-pro>view:nth-child(1)>view:nth-child(2) text {
		font-size: 24rpx;
		color: #666666;
		max-width: 370rpx;
	}

	.news-item .no-pro>image {
		width: 214rpx;
		height: 160rpx;
		background-color: #a2a2a2;
		border-radius: 6rpx;
	}
</style>
<style scoped>
	.home {
		width: 100%;
		overflow: hidden;
		min-height: 100%;
		background: #f5f5f5;
	}

	.rollingBar {
		width: 100%;
		position: absolute;
		bottom: 35rpx;
		left: 0;
		display: flex;
		align-items: center;
	}

	.rollingBar .tab-bar {
		width: 10rpx;
		height: 10rpx;
		background-color: #fff;
		opacity: 0.7;
		border-radius: 100%;
		margin-right: 20rpx;
		transition: all 0.2s;
	}

	.hotBar {
		bottom: 0 !important
	}

	.hotBar .tab-bar {
		opacity: 1;
		width: 36rpx !important;
		height: 8rpx !important;
		border-radius: 8rpx !important;
		background-color: #999 !important;

	}

	.hotBar .tab-bar.active {
		background-color: #f34930 !important;
	}

	.rollingBar .tab-bar:last-child {
		margin-right: 0;
	}

	.rollingBar .tab-bar.active {
		width: 40rpx;
		opacity: 1;
		border-radius: 50rpx;
	}

	/* 导航栏 */

	.function-container {
		width: 100%;
		height: 360rpx;
		position: relative;
		/* margin-bottom: 20rpx; */
		margin-top: 30rpx;
	}

	.function-m {
		width: 100%;
		height: 360rpx;
		/* background-color: #fff;
		background: #fff; */
		z-index: 99;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 10rpx 24rpx 20rpx;
		box-sizing: border-box;
	}

	.function-m .function-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.function-m .function-item image {
		width: 88rpx;
		height: 88rpx;
	}

	.function-m .function-item .text {
		color: #333;
		font-size: 28rpx;
	}

	/* 搜索框 */

	.header {
		width: 650rpx;
		position: absolute;
		top: 15rpx;
		left: 50%;
		margin-left: -325rpx;
		z-index: 99;
		display: flex;
		height: 70rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.header .address {
		width: 120rpx;
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}

	.header .address .text {
		color: #fff;
	}

	.header .address image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 15rpx;
	}

	.header .search {
		background: #fff;
		flex: 1;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 55rpx;
		padding: 0 20rpx;
	}

	.header .search image {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}

	.header .search input {
		font-size: 24rpx;
		color: #999;
	}


	/* 通告 */

	.mark-swipe {
		width: 100%;
		height: 60;
		background: #fff;
		display: flex;
		align-items: center;
		position: relative;
	}

	.swipe-layer-tips {
		width: 100%;
		height: 60;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
	}

	.mark-swipe .tips-img {
		width: 56rpx;
		height: 56rpx;
		margin: 0 20rpx 0 24rpx;
	}

	.mark-swipe .swipe {
		width: 100%;
		flex: 1;
		height: 56rpx;
		/* padding: 20rpx 30rpx 20rpx 0; */
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-content: center;
	}

	.mark-swipe .swipe .swipe-item {
		width: 100%;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #333;
		padding-right: 24rpx;
		box-sizing: border-box;
	}

	/* 首页公用标题样式 */

	.title-header {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		/* background: #fff; */
	}

	.new-more {
		padding: 0 12rpx;
		height: 42rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #999999;
		text-align: center;
	}

	/* 热门商家 */
	.hot-shops {
		width: 100%;
		background: #fff;
		position: relative;
	}

	.hot-shops swiper {
		width: 100%;
		transition: all .5s;
	}

	.hot-shops swiper swiper-item {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #f5f5f5;
	}

	.change-has {
		height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 20rpx;
	}

	.change-has image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 5rpx;
	}

	.change-has text {
		font-size: 24rpx;
		color: #333;
	}

	/* 连锁商家 */

	.banner-content {
		background: #fff;
		/* padding: 20rpx 0; */
		box-sizing: border-box;
		position: relative;
	}

	.banner-content .layer-top {
		position: absolute;
		right: 0;
		top: 20rpx;
		height: 230rpx;
		width: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-content .layer-top image {
		width: 44rpx;
		height: 44rpx;
		-webkit-animation: gogogo 2s infinite linear;
	}

	@-webkit-keyframes gogogo {
		0% {
			-webkit-transform: translateX(7rpx);
		}

		50% {
			-webkit-transform: translateX(-7rpx);
		}

		100% {
			-webkit-transform: translateX(7rpx);
		}
	}

	.swiper-container {
		width: 100%;
		/* display: flex; */
		padding-right: 24rpx;
		white-space: nowrap;
		background: #f8f8f8;
	}

	.swiper-container .swiper-item {
		display: inline-block;
		width: 300rpx;
		height: 407rpx;
		position: relative;
		/* margin: 20rpx 20rpx 20rpx 0; */
		margin-right: 20rpx;
		box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(102, 102, 102, 0.3);
		border-radius: 8rpx;
	}

	.swiper-container .swiper-item .coon .zhanwei {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none !important;
		border-radius: 8rpx;
		box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(102, 102, 102, 0.3);
	}

	.swiper-container .swiper-item .coon {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* padding: 48rpx 0 30rpx; */
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.swiper-container .swiper-item:nth-child(1) {
		margin-left: 24rpx;
	}

	.swiper-container .swiper-item .coon image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		/* border: solid 1rpx #efefef; */
	}

	.swiper-container .swiper-item .coon .name {
		font-size: 28rpx;
		line-height: 60rpx;
		letter-spacing: 1rpx;
		color: #fff;
		font-weight: bold;
		max-width: 280rpx;
	}

	.swiper-container .swiper-item .coon .slogin {
		width: 300rpx;
		font-size: 26rpx;
		line-height: 32rpx;
		letter-spacing: 1rpx;
		color: #fff;
		text-align: center;
		padding: 0 27rpx !important;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: pre-wrap;
	}

	.swiper-container .swiper-item .coon .number {
		position: absolute;
		bottom: 20rpx;
		right: 50%;
		width: 100rpx;
		margin-right: -50rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		letter-spacing: 1rpx;
		color: #e16b1d;
		font-weight: bold;
	}


	/* 最新免单 */

	.order-list {
		overflow: hidden;
		width: 100%;
		height: 500rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.order-items {
		width: 100%;
		height: 600rpx;
	}

	.order-item {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	/* .order-list .order-item:nth-child(1) .first-space {
		background: #2a82e4;
	}

	.order-list .order-item:nth-child(2) .first-space {
		background: #e60000;
	}

	.order-list .order-item:nth-child(3) .first-space {
		background: #999;
	}

	.order-list .order-item:nth-child(4) .first-space {
		background: #68b1d1;
	} */

	.order-list .order-item:last-child {
		margin-bottom: 0rpx;
	}

	.order-item .first-space {
		width: 8rpx;
		height: 28rpx;
		border-radius: 6rpx;
	}

	.order-item image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		margin-right: 20rpx;
	}

	.order-item .info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.order-item .info view:nth-child(1) {
		font-size: 24rpx;
		color: #666;
	}

	.order-item .info view:nth-child(2) {
		font-size: 24rpx;
		color: #333;
		overflow: hidden;
		max-width: 500rpx;
	}

	.order-item .info view:nth-child(2) text {
		color: #e60000;
		font-size: 26rpx;
	}

	.order-item .price {
		font-size: 26rpx;
		color: #f00;
	}

	/* 最新入驻 */

	.new-shops {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.news-alive {
		width: 100%;
		height: 180rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.news-alive .head-img {
		height: 160rpx;
		width: 200rpx;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		box-shadow: 3.1rpx 2.6rpx 5.6rpx 0.4rpx rgba(0, 0, 0, 0.21);
		border-radius: 10rpx;
		z-index: 2;
	}

	.news-alive .bottom {
		height: 140rpx;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx 40rpx 20rpx 240rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.news-alive .bottom .name {
		color: #333;
		font-size: 26rpx;
	}

	.news-alive .bottom .i-d {
		color: #666;
		font-size: 24rpx;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	.news-alive .bottom .i-d>view {
		color: #666;
		font-size: 24rpx;
	}

	.news-alive .bottom .news {
		position: absolute;
		width: 78rpx;
		height: 78rpx;
		right: -1rpx;
		top: -3rpx;
		z-index: 99;
	}


	.tui-rolling-search {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		border-radius: 35upx;
		padding: 0 40upx 0 30upx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-rolling-search icon {
		line-height: 4
	}

	.tui-category {
		font-size: 24upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0;
		margin-right: 22upx;
		flex-shrink: 0;
	}

	.tui-category-scale {
		transform: scale(0.7);
		line-height: 24upx;
	}

	.tui-category .tui-icon-class {
		line-height: 20px !important;
		margin-bottom: 0 !important;
	}

	.tui-swiper {
		font-size: 26upx;
		height: 60upx;
		flex: 1;
		padding-left: 12upx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.now-add {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.now-add>view {
		font-size: 28rpx;
		color: #fefefe;
		margin-right: 10rpx;
	}

	.now-add image {
		width: 23rpx;
		height: 20rpx;
	}

	.saoma {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	/* home-header */
	.home-header {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		padding-left: 24rpx;
		box-sizing: border-box;
		padding-right: 24rpx;
		/* #ifdef MP-WEIXIN */
		padding-right: 220upx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		padding-right: 150upx;
		/* #endif */
		box-shadow: 0upx 0upx 0upx;
		z-index: 9999;
	}

	.home-header .content {
		flex: 1;
		margin-right: 24rpx;
		margin-left: 24rpx;
	}

	.home-header .right {
		width: 36rpx;
		height: 36rpx;
	}

	.home-header .right image {
		width: 100%;
		height: 100%;
	}

	/* 新banner */
	.tui-header-banner {
		width: 100%;
		/* #ifdef H5 */
		/* padding-top: 20upx !important; */
		/* #endif */
	}

	.tui-banner-bg {
		width: 100%;
		display: flex;
		height: 300rpx;
		position: relative;
		border-radius: 0 0 70rpx 70rpx;
	}

	.tui-banner-box {
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		z-index: 99;
		bottom: -30upx;
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 320upx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-banner-swiper swiper-item {
		padding: 0 24upx 20rpx;
		box-sizing: border-box;
		border-radius: 12upx;
	}

	.tui-slide-image {
		width: 100%;
		height: 300upx;
		display: block;
		border-radius: 12upx;
		box-shadow: 3rpx 3px 10rpx rgba(0, 0, 0, .3);
	}

	.tui-banner-swiper .wx-swiper-dot {
		width: 8upx;
		height: 8upx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16upx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16upx;
	}

	.tui-extend-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}


	.tui-extend-item {
		width: 346rpx;
		height: 300rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		color: #fff;
		text-align: justify;
		word-break: break-all;
		word-wrap: break-word;
		position: relative;
		background: #fff;
		border-radius: 8rpx;
	}

	.tui-extend-item .image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.tui-extend-item::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		border-radius: 8rpx;
	}

	.tui-extend-item .item-content {
		padding: 0 15rpx;
		box-sizing: border-box;
		width: 100%;
		height: 88rpx;
		border-radius: 0 0 8rpx 8rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		max-width: 200rpx;
	}

	.tui-sub-title {
		font-size: 24rpx;
		color: #ffffff;
	}

	.tags uni-tag {
		margin-right: 10rpx;
	}

	.bg-black-layer {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .6);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: borde-box;
		z-index: 99999;
	}

	.bg-black-layer .version {
		width: 560rpx;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Version-update-bg2-2.png') no-repeat, #ffffff;
		background-size: ;
		border-radius: 10rpx;
		position: relative;
		background-size: 560rpx 240rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 10px #fff;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.bg-black-layer .version>view:nth-child(1) {
		font-size: 48rpx;
		letter-spacing: 4rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.bg-black-layer .version>view:nth-child(2) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 4rpx;
		color: #ffffff;
		font-weight: bold;
		margin-top: 15rpx;
	}

	.bg-black-layer .version>view:nth-child(3) {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 120rpx;
		/* align-items: center; */
	}

	.bg-black-layer .version>view:nth-child(3)>view {
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.bg-black-layer .version>view:nth-child(3)>view text:nth-child(1) {
		width: 20rpx;
		height: 20rpx;
		background-color: #f34930;
		margin-right: 20rpx;
		display: block;
		border-radius: 100%;
		margin-top: 5rpx;
	}

	.bg-black-layer .version>view:nth-child(3)>view text:nth-child(2) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		display: block;
		flex: 1;
	}

	.bg-black-layer .version>view:nth-child(4) {
		width: 480rpx;
		height: 72rpx;
		background-color: #f34930;
		box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(197, 42, 19, 0.34);
		border-radius: 36rpx;
		margin-top: 40rpx;
		text-align: center;
		line-height: 72rpx;
		color: #fff;
		font-weight: bold;
	}

	.bg-black-layer .version>view:nth-child(5) {
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.show-grade-ima {
		width: 100%;
		height: 200rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 20rpx
	}

	.show-grade-ima image {
		width: 100%;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.mf-swiper {
		width: 700rpx;
		height: 430rpx;
		border-radius: 16rpx;
		background: #fff;
		margin: 0 auto 0;
	}

	.mf-swiper swiper {
		width: 100%;
		height: 100%;
	}

	.mf-swiper swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.mf-swiper swiper-item .draw-item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.mf-swiper swiper-item .draw-item image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
		border-radius: 100%;
	}

	.mf-swiper swiper-item .draw-item>view {
		flex: 1;
		height: 88rpx;
		border-bottom: solid 1rpx #efefef;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mf-swiper swiper-item .draw-item>view>text:nth-child(1) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 450rpx
	}

	.mf-swiper swiper-item .draw-item>view>text:nth-child(2) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #f34930;
	}

	.recommend-cont {
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
	}

	.recommend-list {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.recommend-list .recommend-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: solid 1rpx #efefef;
		padding: 20rpx 0 10rpx
	}

	.recommend-list .recommend-item>image {
		width: 218rpx;
		height: 180rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.recommend-list .recommend-item>view {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.recommend-list .recommend-item>view>view:nth-child(1) {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.recommend-list .recommend-item>view>view:nth-child(1) text:nth-child(1){
		font-size: 28rpx;
		color: #333333;
		max-width: 300rpx;
		font-weight: bold;
	}
	
	.recommend-list .recommend-item>view>view:nth-child(1) text:nth-child(2){
		font-size: 24rpx;
		color: #666666;
	}

	.recommend-list .recommend-item>view>view:nth-child(2) {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.recommend-list .recommend-item>view>view:nth-child(2) text {
		font-size: 24rpx;
		color: #f8990b;
		padding: 0 10rpx;
	}

	.recommend-list .recommend-item>view>view:nth-child(2) text:nth-child(1) {
		padding-left: 0 !important;
	}

	.recommend-list .recommend-item>view>view:nth-child(2) text:nth-child(2) {
		border-left: solid 1rpx #efefef;
		font-size: 24rpx;
		color: #666666;
	}

	.recommend-list .recommend-item>view>view:nth-child(3) {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.recommend-list .recommend-item>view>view:nth-child(3) text {
		padding: 0 5rpx;
		line-height: 30rpx;
		border-radius: 4rpx;
		border: solid 1rpx #efefef;
		font-size: 20rpx;
		color: #999999;
		margin-right: 15rpx;
	}

	.recommend-list .recommend-item>view>view:nth-child(3) text:nth-child(1) {
		background: rgba(248, 153, 11, .2);
		border: none !important;
		color: #f8990b !important;
	}

	.recommend-list .recommend-item>view>view:nth-child(4) {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding: 10rpx 0;
	}

	.recommend-list .recommend-item>view>view:nth-child(4) image {
		width: 25rpx;
		height: 23rpx;
		margin-right: 10rpx;
	}

	.recommend-list .recommend-item>view>view:nth-child(4) text {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
		max-width: 400rpx;
	}

	.recommend-list .recommend-item>view>view:nth-child(5) {
		display: flex;
		padding: 10rpx;
		border-top: solid 1rpx #efefef;
		align-items: center;
	}

	.recommend-list .recommend-item>view>view:nth-child(5)>view:nth-child(1) {
		display: flex;
		align-items: center;
	}

	.recommend-list .recommend-item>view>view:nth-child(5)>view:nth-child(1) image {
		width: 48rpx;
		height: 48rpx;
		margin-left: -20rpx;
		border-radius: 100%;
	}

	.recommend-list .recommend-item>view>view:nth-child(5)>view:nth-child(1) image:nth-child(1) {
		margin-left: 0 !important;
	}

	.recommend-list .recommend-item>view>view:nth-child(5)>view:nth-child(2) {
		font-size: 24rpx;
		color: #333333;
		margin-left: 50rpx;
	}
	
	.guang-gao{
		width: 700rpx;
		height: 200rpx;
		margin: 0 auto;
		display: block
	}
</style>

<style>
	.tags>view {
		margin-right: 10rpx;
	}
</style>
